<template>
  <div class="header">
    <router-link to="main">
      <van-icon name="arrow-left" class="fanhui" />
    </router-link>
    <h1>设置</h1>
  </div>
  <ul class="nav">
    <li class="touxiang"></li>
    <li>
      <van-cell is-link @click="showPopup">
        <p>昵称</p>
        <span>{{ name2 }}</span>
      </van-cell>
      <van-dialog
        v-model:show="show"
        title="昵称修改"
        show-cancel-button
        @confirm="conFirm"
        @cancel="canCel"
      >
        <input
          v-model="name1"
          type="text"
          ref="ipt"
          class="ipt"
          :placeholder="name"
        />
      </van-dialog>
    </li>
    <li>
      <van-cell>
        <p>手机</p>
        <span>15660694615</span>
      </van-cell>
    </li>
    <li class="xingbie">
      <van-popup
        v-model:show="flag"
        position="bottom"
        :style="{
          height: '25%',
          width: '90%',
          borderRadius: '10px 10px 0 0 ',
          marginLeft: '20px',
        }"
      >
        <li @click="(num = '男'), (flag = false)">男</li>
        <li @click="(num = '女'), (flag = false)">女</li>
        <span @click="flag = false">取消</span>
      </van-popup>
      <van-cell is-link @click="flag = true">
        <p>性别</p>
        <span>{{ num }}</span>
      </van-cell>
    </li>
    <li>
      <van-popup
        v-model:show="time"
        position="bottom"
        :style="{ height: '50%', width: '100%' }"
      >
        <div class="time" v-show="time">
          <van-datetime-picker
            v-model="timeValue"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="(timeValue = ''), (time = false)"
            @confirm="confirmFn"
          />
        </div>
      </van-popup>
      <van-cell is-link @click="timeSer" v-model="timeValue">
        <p>生日</p>
        {{ value1 }}
      </van-cell>
    </li>
    <li>
      <router-link to="biaoqian">
        <van-cell is-link>
          <p class="p">我的标签</p>
          <span class="move" v-if="$store.state.duan.biao">
            {{ $store.state.duan.biao }}</span
          >
        </van-cell>
      </router-link>
    </li>
    <li>
      <router-link to="jianjie">
        <van-cell is-link class="one">
          <p class="p">我的简介</p>
          <span class="moveone">{{ $store.state.duan.jian }}</span>
        </van-cell>
      </router-link>
    </li>
  </ul>

  <span class="foot" @click="delhandle()">退出登录</span>
</template>
<script>
import { Toast } from "vant";
import http from "@/api/index";

export default {
  data() {
    return {
      show: false,
      // showPopup: false,
      flag: false,
      num: "男",
      time: false,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2012, 10, 1),
      // value: 'timeValue',
      value1: "请选择出生日期",
      name: "",
      name1: "",
      name2: "",
    };
  },
  methods: {
    showPopup() {
      this.show = true;
      setTimeout(() => {
        this.jujiao();
      }, 1000);
    },
    timeSer() {
      this.time = true;
    },
    confirmFn() {
      this.time = false;
      let year = this.timeValue.getFullYear();
      let month = this.timeValue.getMonth() + 1;
      let day = this.timeValue.getDate();
      this.value1 = year + "-" + month + "-" + day;
    },
    conFirm() {
      this.name2 = this.name1;
      this.name = this.name2;
      Toast({
        message: "修改成功",
        position: "top",
        overlay: 1,
        duration: 300,
      });
      if (this.name) {
        this.$store.commit("duan/setName", this.name);
      }
    },
    canCel() {
      if (this.name2) {
        this.name1 = "";
      }
    },
    jujiao() {
      this.$refs.ipt.focus();
    },
    delhandle() {
      // console.log(this.$store.state.bian.data, "data");
      let reqData = this.$store.state.bian.data;
      http.getout(reqData).then((res) => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$toast.success("退出成功");
          setTimeout(() => {
            this.$router.push("login");
          }, 1000);
        } else {
          this.$dialog
            .alert({
              title: "系统提示",
              message: msg,
            })
            .then(() => {
              // on close
            });
        }
      });
    },
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 10%;
  background-color: rgba(248, 248, 248, 100);
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: row;
}

.fanhui {
  color: black;
  font-size: 23px;
  font-weight: bolder;
  left: 10px;
}

h1 {
  margin-left: calc(50% - 40px);
}

li {
  font-size: 20px;
  line-height: 50px;
  /* text-align: center; */
  list-style: none;
}

.time {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 22;
}

.ipt {
  width: 80%;
  border: 1px solid #999;
  height: 36px;
  margin-left: 30px;
  border-radius: 10px;
}

p {
  text-indent: 10px;
  float: left;
  color: #999;
  margin-right: 80px;
}

.p {
  margin-right: 40px;
}

.move {
  border: 1px solid;
  padding: 0 10px;
  font-size: 14px;
  color: #999;
}

.jiantou {
  float: right;
  right: 5px;
  top: 15px;
}

.xingbie li {
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #999;
}

.xingbie {
  text-align: center;
  line-height: 60px;
  /* color: #999; */
}

.nav {
  width: 100%;
  height: 80%;
}

.foot {
  width: 80%;
  height: 10%;
  display: flex;
  margin-left: 10%;
  flex-direction: column;
  justify-content: space-around;
  background-color: #444;
  color: #fff;
  border-radius: 10px;
  margin-bottom: 30px;
  text-align: center;
}

.one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsi;
}
</style>
